<template>
	<view class="page-wrapper">
		<!-- 标题 -->
		<CommonTitle title="我的"></CommonTitle>
		<!-- 头像 -->
		<view class="avatar-wrapper">
			<!-- <image class="avatar" src="/static/logo.png" mode=""></image> -->
			<up-image class="avatar" width="248rpx" height="248rpx" :show-loading="true" shape="circle" src="/static/logo.png"
				@click="click"></up-image>

			<text class="avatar-text">九华山管理</text>
		</view>
		<!-- 列表块 -->
		<view class="operation-wrap">
			<view class="operation-content">
				<!-- 列表 -->
				<view class="list-item">
					<text>我处理的</text>
					<up-icon name="arrow-right" color="#fff" size="26rpx"></up-icon>
				</view>
				<view class="list-item">
					<text>我的待处理</text>
					<up-icon name="arrow-right" color="#fff" size="26rpx"></up-icon>
				</view>
				<view class="list-item">
					<text>我处理完成的</text>
					<up-icon name="arrow-right" color="#fff" size="26rpx"></up-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';  
 
</script>

<style lang="scss" scoped>
	.avatar-wrapper {
		width: 100%;
		height: 506rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.avatar {
			width: 248rpx;
			height: 248rpx;
		}

		.avatar-text {
			margin-top: 34rpx;
			font-size: 36rpx;
			color: #fff;
			font-weight: 400;
		}
	}
	
	.operation-wrap {
		width: 100%;
		padding: 0 30rpx;
		
		.operation-content {
			padding: 8rpx 28rpx 10rpx 28rpx;
			width: 100%;
			border-radius: 22rpx;
			background: #3878CB;
			
			.list-item {
				width: 100%;
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				text {
					font-size: 32rpx;
					color: #fff;
				}
			}
		}
	}
</style>